<template>
  <div class="work-list">
    <div class="work-content">
      <div class="work-content-header">
        <h1 v-if="workTitle.trim().length === 0">我的作品和模板</h1>
        <h1 v-else>
          {{ workTitle }}的结果
          <CloseCircleOutlined class="close-icon" @click="onClearHandle" />
        </h1>
        <a-input-search
          placeholder="搜索作品"
          style="width: 200px"
          @search="onSearchHandle"
        />
      </div>
      <div class="work-content-body">
        <a-spin :spinning="loading">
          <a-tabs v-model:activeKey="activeKey" @change="onTabChange">
            <a-tab-pane key="myWork" tab="我的作品">
              <WorkTemplateList
                :templateList="myWorkList"
                @on-delete="onDeleteHandle"
                v-if="myWorkList.length > 0"
              />
              <a-empty v-else>
                <template #description>
                  <span> 还没有作品，快去创建吧！ </span>
                </template>
                <a-button type="primary" @click="createWorkHandle"
                  >创建我的第一个作品</a-button
                >
              </a-empty>
            </a-tab-pane>
            <a-tab-pane key="myTemplate" tab="我的模板">
              <WorkTemplateList
                :templateList="myWorkList"
                v-if="myWorkList.length > 0"
              />
              <a-empty v-else>
                <template #description>
                  <span> 还没有作品，快去创建吧！ </span>
                </template>
                <a-button type="primary" @click="createWorkHandle"
                  >创建我的第一个作品</a-button
                >
              </a-empty>
            </a-tab-pane>
          </a-tabs>
        </a-spin>
      </div>
    </div>
    <a-pagination
      :style="{ margin: '20px 0' }"
      v-model:current="current"
      v-model:pageSize="pageSize"
      :total="templateStore.myWorkTemplateTotal"
      @change="paginationChange"
    />
  </div>
</template>

<script setup lang="ts">
import WorkTemplateList from '@/components/workTemplateList/work-template-list.vue'
import useTemplateStore from '@/store/modules/templateStore'
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { CloseCircleOutlined } from '@ant-design/icons-vue'
import useGlobalStore from '@/store/modules/globalStore'
import { createWorkAPI } from '@/request/modules/work'
const workTitle = ref('')
const router = useRouter()
const globalStore = useGlobalStore()
const loading = computed(() => globalStore.isLoading)
const templateStore = useTemplateStore()

const current = ref(1)
const pageSize = ref(8)
const activeKey = ref('myWork')
const myWorkList = computed(() => templateStore.myWorkTemplate)
const loadMoreWorkList = async () => {
  await templateStore.setMyWorkTemplate({
    pageIndex: current.value - 1,
    pageSize: pageSize.value,
    title: workTitle.value,
    isTemplate: activeKey.value !== 'myWork',
  })
}
const onTabChange = () => {
  pageSize.value = 8
  current.value = 1
  loadMoreWorkList()
}
const paginationChange = () => {
  loadMoreWorkList()
}
const onSearchHandle = async (val: string) => {
  workTitle.value = val
  await loadMoreWorkList()
}
const onClearHandle = async () => {
  workTitle.value = ''
  await loadMoreWorkList()
}
const createWorkHandle = async () => {
  const result = await createWorkAPI()
  const { _id } = result.data?.data || {}
  if (_id) {
    router.push({
      name: 'editor',
      params: {
        id: _id,
      },
    })
  }
}
const onDeleteHandle = () => {
  loadMoreWorkList()
}
onMounted(() => {
  loadMoreWorkList()
})
</script>

<style scoped lang="scss">
.work-list {
  min-height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .work-content {
    width: 1250px;
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    .work-content-header {
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      h1 {
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        font-size: 23px;
        .close-icon {
          cursor: pointer;
        }
      }
    }
    .work-content-body {
      flex: 1;
    }
  }
}
</style>
